<div class="col-lg-8">
  <div class="panel panel-default">
    <div class="panel-heading">
      {{items.model.name}}
      <span class="pull-right">
        <a ui-sref="app.browser.models.items.add({ modelName: items.model.name})" class="btn btn-xs btn-default">Add</a>
      </span>
    </div>

    <div class="panel-body" ng-if="!items.items || !items.items.length">
      <alert type="alert alert-info">
        No items found
        <span ng-if="items.model.name">for {{items.model.name}}</span>
      </alert>
    </div>

    <div class="table-responsive" ng-if="items.items && items.items.length" style="overflow: auto">
      <table class="table table-striped" ng-if="items.itemKeys">
        <tr>
          <th class="col-md-1">&nbsp;</th>
          <th ng-repeat="itemKey in items.itemKeys">{{itemKey}}</th>
        </tr>
        <tr ng-repeat="item in items.items">
          <td class="text-nowrap">
              <a ui-sref="app.browser.models.items.view({ modelName: items.model.name, modelId: item.id })" class="btn btn-default btn-xs">
                <i class="fa fa-eye"></i>
              </a>
              <a ui-sref="app.browser.models.items.edit({ modelName: items.model.name, modelId: item.id })" class="btn btn-default btn-xs">
                <i class="fa fa-pencil"></i>
              </a>
              <a ui-sref="app.browser.models.items.delete({ modelName: items.model.name, modelId: item.id })" class="btn btn-default btn-xs">
                <i class="fa fa-trash-o"></i>
              </a>
          </td>
          <td ng-repeat="itemKey in items.itemKeys" class="text-nowrap">
            <span ng-if="itemKey == 'id' || itemKey == 'name' || itemKey == 'title' ">
              <a ui-sref="app.browser.models.items.view({ modelName: items.model.name, modelId: item.id })">
                {{item[itemKey]}}
              </a>
            </span>
            <span ng-if="itemKey != 'id' && itemKey != 'name' && itemKey != 'title' ">
              {{item[itemKey]}}
            </span>
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>
<div class="col-lg-4">

  <ui-view></ui-view>

  <div class="panel panel-default">
    <div class="panel-heading">Model Properties</div>
    <pre>{{items.model|json}}</pre>
  </div>
</div>
